<template>
  <div class="home">
    <swiper :options="swiperOption">
      <swiper-slide v-for="(slide, index) in arr" :key="index" class="active">
        <div class="type" @click="Clk(slide.shortName,index)" :class="[ index ==num ? 'active' : '' ]">{{slide.name}}
        </div>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>

    <div class="font"><span class="iconfont icon-gongneng2" @click="all"></span></div>
    <div v-show="show" class="full">
      <div class="HomeClassify-header">
        <div class="HomeClassify-headerTitle">
          选择分类
        </div>
        <div class="HomeClassify-headerClose" @click="close"></div>
      </div>
      <!-- 全部 -->
      <div class="ClassifyModule" @touchmove.prevent>
        <div class="ClassifyModule-nav">
          <swiper :options="swiperOption">
            <swiper-slide v-for="(slide, index) in lie" :key="index" class="active">
              <div class="type" @click="exchange(slide.cate1Id)">{{slide.cate1Name}}</div>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>

          <!-- 图片+游戏 -->
          <div @touchmove.prevent class="ClassifyModule-content">
            <ul>
              <li class="ClassifyModule-contentUlItem" v-for="(src,i) in shuju" :key="i" @click="game(src.shortName)">
                <div class="ClassifyModule-contentUlItemShow">
                  <img :src="src.icon" alt="">
                </div>
                <div class="ClassifyModule-contentUlItemShowText">{{src.cate2Name}}</div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>
<script>
  export default {
    name: 'home',
    data() {
      return {
        arr3: [],
        arr: [],
        arr2: [],
        arrOne: [],
        arrid: [],
        lie: [],
        shuju: [],
        swiperOption: {
          autoplay: false,
          slidesPerView: 5,
          normalizeSlideIndex: false,
        },
        shuju2: [],
        show: false,
        num: ''
      }
    },
    created() {
      this.getData()
    },
    methods: {
      getData() {
        this.$http.get('/api/cate/recList?cid=&ct=').then(res => {
          this.arr = res.data.data
        })
      },
      Clk(a, index) {
        this.num = index
        console.log(index)
        this.$router.push({
          path: '/deta',
          query: {
            id: a
          }
        })
      },
      all() {
        var HomeLive = document.querySelector("body")
        HomeLive.style.overflow = "hidden"
        this.show = true
        this.$http.get('/api/cate/list').then(res => {
          this.lie = res.data.data.cate1Info
          this.shuju2 = res.data.data.cate2Info
          this.shuju = this.shuju2
        })
      },
      close() {
        this.show = false
        var HomeLive = document.querySelector("body")
        HomeLive.style.overflow = "visible"

      },
      exchange(rid) {
        for (var i = 0; i < this.shuju2.length; i++) {
          if (this.shuju2[i].count == rid) {
            this.arr3.push(this.shuju2[i])
          }
        }
        this.shuju = this.arr3
        this.arr3 = []
      },
      game(Sne) {
        var HomeLive = document.querySelector("body")
        HomeLive.style.overflow = "visible"
        this.show = false
        this.$router.push({
          path: '/deta',
          query: {
            Sne: Sne
          }
        })
      }
    },

  }
</script>
<style scoped>
  .active{
    color: #ff6d00;
  }
  .ClassifyModule-contentUlItem {
    position: relative;
    width: 125px;
    height: 125px;
    float: left;
    width: 33.333333%;
    border-right: 1px dashed #ddd;
    border-bottom: 1px dashed #ddd;
  }

  .ClassifyModule-contentUlItemShow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 61px;
    height: 61px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
  }

  .ClassifyModule-content {
    width: 100%;
    height: 375px;
    background-color: #f4f4f4;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .ClassifyModule-contentUlItemShow img {
    width: 66px;
    height: 66px;
    border-radius: 50%;
  }

  .ClassifyModule-contentUlItemShowText {
    position: absolute;
    left: 0;
    bottom: 13px;
    width: 100%;
    height: 14px;
    line-height: 14px;
    text-align: center;
    font-size: 12px;
    color: #333;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .across {
    width: 100%;
    height: 100%;
    display: flex;
  }

  .across li {
    height: 20px;
    color: #000;
    width: 20px;
  }

  html {
    position: relative;
    width: 100%;
    top: 0;
    bottom: 0;
    background: red;
  }

  .full {
    background: rgba(0, 0, 0, .4);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    bottom: 0;
  }

  .HomeClassify-header {
    position: relative;
    width: 100%;
    height: 54px;
    background: #fff;
  }

  .HomeClassify-headerTitle {
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 54px;
    font-size: 16px;
    color: #3f3f3f;
  }

  .HomeClassify-headerClose {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    background: url(https://shark2.douyucdn.cn/front-publish/m-douyu-v3-master/assets/images/close_8b63a1d.png) no-repeat;
    -webkit-background-size: 16px 16px;
    -moz-background-size: 16px 16px;
    background-size: 16px 16px;
    background-position: 50%;
  }

  .ClassifyModule-nav {
    color: #000;
    width: 100%;
    height: 419px;

    overflow-x: auto;
    overflow-y: hidden;

    background: #fff;
  }

  .swiper-wrapper {
    z-index: 999;
  }

  .font {
    color: #333;
    width: 25px;
    height: 20px;
    position: fixed;
    right: 0px;
    top: 55px;
    background: #fff;
    z-index: 99;
  }


  .img {
    width: 100%;
    height: 180px;
  }

  .swiper-container .swiper-slide {
    height: 36px;
    color: #666;
    padding: 5px;
  }

  .HomePage-bottom {
    position: absolute;
    top: 100px;
    left: 0;
    bottom: 0;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;

  }

  .HomeLive {
    margin-top: 10px;
    width: 100%;
    background: #fff;
  }

  .HomeLive-title {

    display: flex;
    justify-content: space-between;
    justify-content: space-between;
    box-align: center;
    align-items: center;
    box-sizing: border-box;
    padding: 0 5px;
    width: 100%;
    height: 42px;
  }

  .HomeLive-titleLive {
    padding-left: 30px;
    height: 100%;
    line-height: 42px;
    color: #333;
    font-size: 15px;
    background: url(https://shark2.douyucdn.cn/front-publish/m-douyu-v3-master/assets/images/icon-live_88adc06.png) no-repeat;
    -webkit-background-size: 20px 12px;
    -moz-background-size: 20px 12px;
    background-size: 20px 12px;
    background-position: 0;
  }

  .HomeLive-titleNum {
    font-size: 13px;
    color: #666;
    display: flex;
    align-items: center;
    height: 100%;
    line-height: 42px;
  }

  .mark {
    color: #f70
  }

  .HomeLive-titleNumIcon {
    display: block;
    margin-left: 5px;
    width: 13px;
    height: 13px;
    background: url(https://shark2.douyucdn.cn/front-publish/m-douyu-v3-master/assets/images/icon-more_6c08756.png) no-repeat;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    background-size: 100% 100%;
  }
</style>